<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>创建报价单</title>
    <%@ include file="/WEB-INF/views/include/head.jsp"%>
    <script src="${ctxStatic}/js/jquery-1.9.1.min.js"></script>
    <script src="${ctxStatic}/js/DateTimePicker.js"></script>
    <script src="${ctxStatic}/js/layer.js"></script>
    <script src="${ctxStatic}/js/style.js"></script>
    <link rel="stylesheet" href="${ctxStatic}/css/common.css">
    <link rel="stylesheet" href="${ctxStatic}/css/layerSm.css">
    <script>
    $(function(){
            $(".tabBox ul li").each(function(){
                var index=$(this).index();

                $(".tabBox ul li").eq(0).addClass("active");

                $(this).click(function(){

                    //alert(index);

                    $(this).addClass("active").siblings().removeClass("active");

                    $(".tabBoxSm > .tabSm").eq(index).stop(true).show().siblings().stop(true).hide();
					
					var tableW = $(".tabBoxSm > .tabSm").eq(index).find('.tableHead').width();
					var tabodyH = $(".tabBoxSm > .tabSm").eq(index).find('.tableBody').height();
					var tableScrollH = $(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').height();
					if(tabodyH>tableScrollH){
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width',tableW + 18 + 'px')
					}else{
						$(".tabBoxSm > .tabSm").eq(index).find('.tableScroll').css('width','inherit')
					}

                })

            })

        })
        
        $(document).ready(function(){
		var form = $("#inputForm");  
        form.validate();//验证指定的表单
    	$("#okButton").click(function(){
    		if (form.valid()) {//如果表单验证成功，则进行提交。  
    			if($("#amountMoney").text() == ""){
    				tipParent("云云");
    				return;
    			}
	    		$("#showHtml").addClass("showHtml"); 
	    		$("#okHead").show();
	    		$("#createHead").hide(); 
	            return false;
	          
          	}
     	});
    });
    
   
	 
    
   
    
    /* 保存创建/编辑信息 */
    function saveForm(){
    	$("#activity_pane").showLoading();
    	var params = $("#inputForm").serialize();
    	$.post("${ctx}/settlement/single/save",params,function(result){
    		/* 弹出提示框,刷新父页面,关闭当前页面 */
    		tipParent(result);
    		 window.parent.frames[0].searchListForm();
    		closeWin();
    		$("#activity_pane").hideLoading();
    	},'json');
    	
    }
   
    <!-- 交货日期回调合同信息   -->
    function callBackContractHtml() {
    	$("#activity_pane").showLoading();
		$.post("${ctx}/settlement/single/findContractInfo?shipmentDate="+$("#shipmentDate").val(),"",function(result){
			$("#amountMoney").html($(callBackHtml(result)).find("#amountMoney").html());
			$("#cloudHtml").html($(callBackHtml(result)).find("#cloudHtml").html());
			$("#activity_pane").hideLoading();
		},'html');
	}
    </script>
   
</head>
<body>
<form id="inputForm">
<!-- 创建编辑头部 -->   
<div id="createHead" class="layerHeader clearfix">
<c:choose>
	   <c:when test="${settlement.id!=null && settlement.id!=''}">
	    <!-- 编辑 --> 
			<p class="headerTitle"><spring:message code="settlement_settlement" /></p>
       </c:when>
       <c:otherwise>
        <!-- 创建 --> 
            <p class="headerTitle"><spring:message code="settlement_settlement" /></p>
       </c:otherwise>
    </c:choose>
	
    <div class="headerButton clearfix">
        <button type="button" id="okButton"><spring:message code="purchaseContract_edit_ok"/></button>
        <button type="button" onclick="closeWin()"><spring:message code="purchaseContract_edit_cancle"/></button>
    </div>
</div>
<!-- 确认页面head部 -->
		<div id="okHead" class="layerHeader clearfix" style="display:none">
			<p class="headerTitle"><spring:message code="settlement_confirm"/></p>
		    <div class="headerButton clearfix">
 		    	<shiro:hasPermission name="bookingspace:single:edit">
		        <button type="button" onclick="saveForm();"><spring:message code="common_save"/></button>
 				</shiro:hasPermission>
		        <button type="button" onclick="closeWin()"><spring:message code="btn_cancle"/></button>
		    </div>
		</div>

<div id="showHtml" class="tabBoxSm">
<input type="hidden" id="id" name="id" value="${settlement.id }">
<div class="smOrderBox" id="activity_pane">                          
        <div class="clearfix">               	
            	<div class="items clearfix">        	
                    <div class="col-33 clearfix haveToBox">
	                    <!-- 交货日期  -->
	                    <p class="tit"><spring:message code="settlement_targetDate"/></p>                      
	           			<input type="text" id="shipmentDate" name="shipmentDate"  value="" onchange="callBackContractHtml();"  onblur="CheckDate(this);" 
	           			data-rule-required="true" data-msg-required="<spring:message code="settlement_customer13"/>">                 
	                    <p class="haveTo">*</p>                        
                    </div>
                    <div class="col-33 clearfix">
                    <!-- 总金额 -->
                        <p class="tit"><spring:message code="settlement_sum_amount"/></p>
                        <label id="amountMoney"><fmt:formatNumber value="${settlement.costSum}" pattern="#,##0.00#"/></label>
                    </div>
                </div>
                <div class="items clearfix">        	
                    <div class="col-33 clearfix haveToBox">
                    <!-- 单票号 -->
                        <p class="tit"><spring:message code="settlement_paymentNo"/></p>
                        <input type="text" id="" name="financeInvoiceEntity.invoiceNo"  value="" data-rule-required="true" data-msg-required="<spring:message code="settlement_customer14"/>">
                        <p class="haveTo">*</p>
                    </div>
                    <div class="col-33 clearfix haveToBox">
                    <!-- 单票金额 -->
                        <p class="tit"><spring:message code="settlement_payment_amount"/></p>
                        <input type="tel" id="" name="financeInvoiceEntity.invoiceMoney"  value="" data-rule-integerDecimalmax="12.2"  data-rule-integerDecimalmax="true" data-msg-integerDecimalmax="<spring:message code="settlement_customer15"/>">
                        <p class="haveTo">*</p>
                    </div>
                     <div class="col-33 clearfix haveToBox">
                    <!-- 单票日期 -->
                        <p class="tit"><spring:message code="settlement_payment_date"/></p>
                        <input type="text" id="" name="financeInvoiceEntity.invoiceDate"  value="" onblur="CheckDate(this);" 
                        data-rule-required="true" data-msg-required="<spring:message code="settlement_customer16"/>">
                        <p class="haveTo">*</p>
                    </div>
                </div>               
       </div>                 
		    	<div class="tableArea">
		        	<div class="" style="width:955px;height:457px;overflow: auto;">
		        		<table cellpadding="0" class="tableHead">
		                    <thead>
		                    <tr>
		                    	<th><p class="tab-No"  style="width: 50px"><spring:message code="common_no" /></p></th>
				            	<th><p class="tab-htddh" style="width: 230px"><spring:message code="settlement_table_packageNo" /></p></th>
				                <th><p class="tab-htddh" style="width: 200px"><spring:message code="settlement_table_contractNo" /></p></th>
				                <th><p class="tab-jhrq" style="width: 150px"><spring:message code="settlement_table_deliverydate" /></p></th>
				                <th><p class="tab-js" style="width: 150px"><spring:message code="settlement_table_number" /></p></th>
				                <th><p class="tab-bz" style="width: 150px"><spring:message code="settlement_table_amount" /></p></th>
		                    </tr>
		                    </thead>
		                </table>
		                 <!-- 订舱单明细 -->
		                <table cellpadding="0" class="tableBody" id="cloudHtml" style="margin-top: 36px;">
							<c:if test="${not empty settlement.settlementList}">
								<tbody>
									<c:forEach items="${settlement.settlementList}" var="booking" varStatus="status">
										<tr>
											<!-- No. -->
											<td><p style="width:50px">${status.count}</p></td>	
											<!-- 箱单号 -->
											<td><p style="width:230px">${booking.packageCustomEntity.packageNo}</p></td>											
											<!-- 合同订单编号 -->
											<td><p style="width:200px">${booking.contractCustomEntity.contractNo}</p></td>											
											<!-- 交货日期 -->
											<td><p style="width: 150px"><fmt:formatDate value="${booking.packageCustomEntity.deliveryDate}" pattern="yyyy-MM-dd"/></p></td>											
											<!-- 件数 -->
											<td><p style="width: 150px"><fmt:formatNumber value="${booking.contractCount}" pattern="#,##0.###"/></p></td>
											<!-- 金额 -->
											<td><p style="width: 150px;text-align: right;"><span style="margin-right: 10px;"><fmt:formatNumber value="${booking.costSum}" pattern="#,##0.00#"/></span></p></td>
											<input type="hidden" name="settlementList[${status.index }].contractCustomEntity.contractId" value="${booking.contractCustomEntity.contractId}"/>
											<input type="hidden" name="settlementList[${status.index }].contractCustomEntity.contractDeliveryDate" value="<fmt:formatDate value="${booking.packageCustomEntity.deliveryDate}" pattern="yyyy-MM-dd"/>"/>
										</tr>
									</c:forEach>
								</tbody>
							</c:if>
						</table>
		            </div>
		        </div>
			</div>		
</div>
</form>
<script>
	window.onload = function(){
			var windowH = window.innerHeight
					||document.documentElement.clientHeight
					||document.body.clientHeight
			$('.tabSm').css({
				'height':windowH - 77,
			});
			$('.tableScrollSm').css({
				'height':windowH - 91
			})
		}
	$('.squareL').on('click', function() {
	    var lastCon = $('.square ol li:last-child').detach();
	    $('.square ol').prepend(lastCon)
	    $('.square ol li:last-child').addClass('active')
	    $('.square ol li:last-child').siblings().removeClass('active')
	})

	$('.squareR').on('click', function() {
	    var lastCon = $('.square ol li:first-child').detach();
	    $('.square ol').append(lastCon)
	    $('.square ol li:last-child').addClass('active')
	    $('.square ol li:last-child').siblings().removeClass('active')
	})
</script>
</body>
</html>
